<template>
	<div class="table-box">
		<div  :class="type == 1 ?'table-head':'table-heads'">
			<div class="head-index" v-for="(items, indexs) in nameList">{{	items }}</div>
		</div>
		<div class="table-main">
			<div :class="type == 1 ?'main-list':''" v-for="(item, index) in tableData" :key="index" v-if="type == 1">
					<div class="main-index" v-for="(items, indexs) in item" :key="indexs">
						<div>{{	items.cityName }}</div>
						<div>{{	items.xzcrmj }}</div>
					</div>
			</div>
			<div :class="type == 2 ?'main-lists':''" v-for="(item, index) in tableData" :key="index" v-if="type == 2">
					<div class="main-index" v-for="(items, indexs) in item" :key="indexs">
						<div>{{	items.cityName }}</div>
						<div>{{	items.fdckftzje }}</div>
					</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, watchEffect, onMounted, onUnmounted,toRaw } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
// 接收参数
const mapInd = ref(0);
const tableData = ref<any>([]);
const type = ref(0)
const props = defineProps({
	housingSupplyStatsData: {
			type: Object,
			default: () => {},
	},
	mapInd: {
			type: Number,
			required: true,
	},
	type:{
		type: Number,
		required: true,
	}
});
const getD = () => {
	tableData.value = [];
	let tabArr = []
	let allArr = []
	let k = 1;
	for(let i = 0; i < props.housingSupplyStatsData.list.length; i++) {
		tabArr.push(props.housingSupplyStatsData.list[i]);
		if(k % 3 == 0){
			allArr.push(tabArr)
			tabArr = []
		}
		k++;
	}
	if(tabArr.length > 0){
		allArr.push(tabArr)
	}
	tableData.value = allArr;
}
// 监听索引变化
watchEffect(() => {
	mapInd.value = props.mapInd;
	type.value = props.type;
	getD()
});
const seamlessScroll = ref(null);
const nameList = props.housingSupplyStatsData.name;

const calculateStep = () => {
	// 获取视口的高度
	const viewportHeight = window.innerHeight;
	getD()
};
onMounted(() => {
	calculateStep();
	window.addEventListener("resize", calculateStep);
});
onUnmounted(() => {
	window.removeEventListener("resize", calculateStep);
});
</script>

<style lang="less" scoped>
.table-box{
	height: 222px !important;
}
.table-head{
	width: 99%;
	margin: 0 auto;
	height: 33px;
	display: flex;
	color: #fff;
	align-items: center;
	font-size: 14px;
	background: linear-gradient(180deg, #2586ee 0%, rgba(37, 134, 238, 0.6) 100%);
	margin-bottom: 3px;
	.head-index{
		flex-grow: 1;
		text-align: center
	}
}
.table-heads{
	width: 99%;
	margin: 0 auto;
	height: 33px;
	display: flex;
	color: #fff;
	align-items: center;
	font-size: 14px;
	background: linear-gradient( 180deg, #13A3A8 0%, rgba(19,163,168,0.6) 99%);
	margin-bottom: 3px;
	.head-index{
		flex-grow: 1;
		text-align: center
	}
}
.table-main{
	width: 99%;
	margin: 0px auto;
	margin-bottom: 10px;
	.main-list{
		display: flex;
	 flex-wrap: wrap;
	}
	.main-lists{
		display: flex;
	 flex-wrap: wrap;
	}
	.main-index{
	color: #fff;
	align-items: center;
	font-size: 14px;
	display: flex;
	padding: 9px 0px;
	div:first-child{
			width: 65px;
			text-align: center;
		}
		div:last-child{
			width: 132px;
			text-align: center;
  }
	}
	.main-indexs{
	color: #fff;
	align-items: center;
	font-size: 14px;
	display: flex;
	padding: 9px 0px;
	div:first-child{
			width: 110px;
			text-align: center;
		}
		div:last-child{
			width: 184px;
			text-align: center;
  }
	}
	.main-index:hover{
		cursor: pointer;
		color: #24E0E6;
	}
}
.main-list:nth-child(odd) {
	background: #092140;
}
.main-lists:nth-child(odd) {
	background: rgba(12,147,152,0.2);
}
</style>
